<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        background-color: aqua;
      }
    </style>
  </head>
  <body></body>
</html>

<script>
  const canvas = document.createElement("canvas");
  canvas.width = 600;
  canvas.height = 400;
  document.body.append(canvas);
  const context = canvas.getContext("2d");

  //   :canvas的位移API
  //   context.translate(100, 100); // 位置的变化是基于原点的。context默认的原点位置是0，0，所以你这里给他变到了100，100，那么接下来画图的原点位置就是100*100

  //   context.fillRect(0, 0, 100, 100);

  //   context.arc(50, 50, 150, 0, Math.PI * 2); // 这里就是100*100原点开始画圆。
  //   context.stroke();

  //   :canvas旋转API, 这里默认都是弧度制的，你要转换成角度就必须 Math.PI / 180
  //   context.rotate(45 * (Math.PI / 180));
  //   context.fillRect(0, 0, 100, 100);

  //   :位移 + 旋转绘制指定图像;
  //   context.moveTo(150, 0);
  //   context.lineTo(150, 150);
  //   context.strokeStyle = "red";

  //   context.stroke();

  //   context.translate(200, 200);
  //   context.rotate((Math.PI / 180) * 45);
  //   context.fillRect(-50, -50, 100, 100);

  //   :canvas缩放API
  //   context.scale(1.2, 0.5); // x轴缩放，y轴缩放
  //   context.fillRect(0, 0, 100, 100);

  // transform聚集 位移旋转缩放...效果一体
  context.transform(1, 0.2, 0.2, 1, 100, 100);

  context.fillRect(0, 0, 100, 100);
</script>
